<template>
  <div class="homePage">
    <div class="page_left">
      <div class="left_top">
        <div class="top_title">
          <p>厕所用电排行</p>
        </div>
        <div class="top_content">
          <div class="content_k">
            <p>公厕排行</p>
            <p>公厕分类</p>
            <p>用电功率(KW)</p>
          </div>
          <div class="content_k" v-for="(item,index) in electric" :key="item+index">
            <p>{{item.elecRank}}</p>
            <p>{{item.name}}</p>
            <p>{{item.dian}}</p>
          </div>
        </div>
      </div>
      <div class="left_bottom">
        <div class="top_title">
          <p>厕所用水排行</p>
        </div>
        <div class="top_content">
          <div class="content_k">
            <p>公厕排行</p>
            <p>公厕分类</p>
            <p>用水量(T)</p>
          </div>
          <div class="content_k" v-for="(item,index) in water" :key="item+index">
            <p>{{item.waterRank}}</p>
            <p>{{item.name}}</p>
            <p>{{item.water}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page_center">
      <div class="center_title">
        <p>总厕数：{{facility_count}}</p>
      </div>
      <div class="center_chart">
        <div class="chart_top">
          <p>今日客流量</p>
        </div>
        <div class="charts_personal">
          <div id="personalChart" :style="{width: '100%', height: '100%'}" ></div>
        </div>
      </div>
    </div>
    <div class="page_right">
      <div class="right_top">
        <div class="top_title">
          <p>优质厕所排行</p>
        </div>
        <div class="top_content">
          <div class="content_k">
            <p>公厕排行</p>
            <p>公厕分类</p>
            <p>公厕评级</p>
          </div>
          <div class="content_k" v-for="(item,index) in toiRank" :key="item+index">
            <p>{{item.toiletRank}}</p>
            <p>{{item.name}}</p>
            <p>{{item.level}}</p>
          </div>
        </div>
      </div>
      <div class="right_center">
        <div class="center_title">
          <span>公厕异常上报</span>
          <a-icon type="warning" />
        </div>
        <div class="center_content">
          <div class="content_k">
            <p>异常详情</p>
            <p>所属公厕</p>
            <p>具体时间</p>
          </div>
          <div class="content_j">
            <ul>
              <li v-for="(item,index) in toiAlarm" :key="item+index">
                  <p>{{item.name}}</p>
                  <p>{{item.facility_name}}</p>
                  <p>{{item.time}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="right_bottom">
        <p>空气质量异常警报</p>
        <p>所有公厕未报异常。</p>
      </div>
    </div>
  </div>
</template>

<script>
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
import {getIndexData,getIndexPersonData,getIndexAlarmData,getIndexRankData} from '../../api'
export default {
  data() {
    return {
      water:[],
      electric:[],
      facility_count:0,
      toiName:[],
      toiToday:[],
      toiWeek:[],
      toiMonth:[],
      toiRank:[],
      toiAlarm:[]
    }
  },
  mounted(){
    this.getHomePageData()
    this.getHomePersonData()
    this.getHomeRankData()
    this.getHomeAlramData()
  },
  methods:{
    async getHomePageData(){
      let res = await getIndexData()
      this.water = res.water
      this.electric = res.dian
      this.electric.sort(compare('dian')).reverse()
      this.electric.map((item,index)=>{
        item['elecRank'] = index+1
      })
      this.water.sort(compare('water')).reverse()
      this.water.map((item,index)=>{
        item['waterRank'] = index+1
      })
    },
    async getHomePersonData(){
      let res = await getIndexPersonData()
      this.facility_count = res[0].facility_count
      let aa = res.splice(1)
      aa.map((item,index)=>{
        this.toiName.push(item.name)
        this.toiToday.push(item.today)
        this.toiWeek.push(item.week)
        this.toiMonth.push(item.month)
      })
      this.initEcharts()
    },
    async getHomeRankData(){
      let res = await getIndexRankData()
      this.toiRank = res
      this.toiRank.sort(compare('level')).reverse()
      this.toiRank.map((item,index)=>{
        item['toiletRank'] = index+1
        switch (item.level) {
          case '1':
            item.level = '优'
            break;
          case '2':
            item.level = '良'
            break;
          case '3':
            item.level = '中'
            break;
          default:
            break;
        }
      })
    },
    async getHomeAlramData(){
      let res = await getIndexAlarmData()
      this.toiAlarm = res
      this.toiAlarm.map(item=>{
        item.time = item.time.replace('T',' ')
      })
    },
    initEcharts(){
      let personalChart = this.$echarts.init(document.getElementById('personalChart'))
      // 绘制图表
      personalChart.setOption({
        tooltip: {
            trigger: 'axis'
        },
        textStyle: {
            color:'white'
        },
        legend: {
            data: ['月客流量', '周客流量','日客流量'],
            textStyle: { 
                color: '#fff',
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: this.toiName,
                axisLine:{
                    lineStyle:{
                        color:'grey'
                    },
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine:{
                    lineStyle:{
                        color:'grey'
                    },
                },
                splitLine: {
                    show: true,//去除网格线
                    lineStyle: {
                        color: '#383756'
                    },
                }
            }
        ],
        series: [
            {
                name: '月客流量',
                type: 'bar',
                data: this.toiMonth,
                itemStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#03f7ff'
                        }, {
                            offset: 1,
                            color: '#0b2c4b'
                        }]),
                    }
                },
            },
            {
                name: '周客流量',
                type: 'bar',
                color:['green'],
                data: this.toiWeek,
                itemStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#8a31ff'
                        }, {
                            offset: 1,
                            color: '#0b2c4b'
                        }]),
                    }
                },
            },
            {
                name: '日客流量',
                type: 'bar',
                color:['skyBlue'],
                data: this.toiToday,
                itemStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#28b1ff'
                        }, {
                            offset: 1,
                            color: '#0b2c4b'
                        }]),
                    }
                },
            }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.homePage {
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
  
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #00f3fc;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
  p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  width: 100%;
  min-height: 100vh;
  background: url(../../assets/img/bg_content.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  .page_left {
    width: 31%;
    height: 100vh;
    .left_top, .left_bottom {
      width: 95%;
      height: 43%;
      margin-top: 17%;
      margin-left: 6%;
      .top_title {
        padding: 2vh 0 0 5%;
        p {
          color: #00f6ff;
          font-size: 23px;
          font-weight: bold;
        }
      }
      .top_content {
        height: 68%;
        padding: 0 31px;
        overflow: hidden;
        overflow-y: scroll;
        .content_k {
          background: #213676;
          color: white;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          p {
            margin: 0;
            text-align: center;
            padding: 5px 10px;
            width: 33.33%;
          }
        }
      }
    }
    .left_bottom {
      width: 95%;
      height: 43%;
      margin-top: 6%;
      margin-left: 6%;
    }
  }
  .page_center {
    width: 36.5%;
    height: 100vh;
    padding: 2vh 0 2vh 3%;
    .center_title{
      height: 38%;
      text-align: center;
      display: flex;
      flex-flow: column-reverse;
      p{
        color: white;
        font-size: 34px;
        margin-bottom: 20px;
      }
    }
    .center_chart{
      height: 59%;
      margin-top: 5%;
      .chart_top{
        height: 14%;
        padding: 15px;
        P{
          font-size: 20px;
          margin: 0;
          color: white;
          margin-left: 10px;
        }
      }
      .charts_personal{
        height: 83%;
      }
    }
  }
  .page_right {
    width: 31.5%;
    height: 100vh;
    padding: 8vh 1% 4vh 2.5%;
    .right_top{
      height: 31%;
      .top_title {
        padding: 5px 0 0 5%;
        p {
          color: #00f6ff;
          font-size: 19px;
          font-weight: bold;
        }
      }
      .top_content {
        height: 68%;
        padding: 0 31px;
        overflow: hidden;
        overflow-y: scroll;
        .content_k {
          background: #213676;
          color: white;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          p {
            margin: 0;
            text-align: center;
            padding: 3px 10px;
            width: 33.33%;
          }
        }
      }
    }
    .right_center{
      height: 30%;
      margin-top: 7%;
      .center_title{
        padding-bottom: 10px;
        span{
          color: white;
          font-size: 19px;
          margin-left: 18px;
        }
        i{
          color: red;
          font-size: 30px;
          margin-left: 10px;
        }
      }
      .center_content{
        height: 75%;
        padding: 0 31px;
        overflow: hidden;
        overflow-y: scroll;
        .content_k {
          background: #213676;
          color: white;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          p {
            margin: 0;
            padding: 0 10px;
            width: 33.33%;
          }
        }
        .content_j{
          height: 77%;
          ul{
            padding: 0;
          }
          li{
            color: red;
            margin-bottom: 5px;
            p{
              display: inline-block;
              color: white;
              width: 33.33%;
              margin: 0;
              line-height: 15px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .right_bottom{
      height: 27%;
      margin-top: 8%;
      color: white;
      font-size: 19px;
      padding: 1vh 1% 1vh 3%;
      overflow: hidden;
      p{
        margin-bottom: 10px;
      }
    }
  }
}
</style>